<%extends file='base.tpl'%>
<%block name='css'%>
<link href="<%static url='/style/common/components.css' type='css'%>" rel="stylesheet" type="text/css">
<%/block%>
<%block name='js'%>
<script src="<%static url='/script/modules/swfobject.js' type='js'%>"></script>
<script src="<%static url='/script/modules/json2.js' type='js'%>"></script>
<%/block%>
<%block name='ex_js'%>
<script>
var ofcData = function(){
	var line={
	  "y_legend":{
		"text":   "Time of day",
		"style": "{color: #736AFF;}"
	  },

		"elements":[
			{
				"type":      "line",
				"colour":    "#736AFF",
				"text":      "Avg. wave height (cm)",
				"font-size": 10,
				"width":     2,
				"values" :   [
					1.5,1.69,1.88,2.06,2.21,2.34,2.43,
					2.48,2.49,2.47,2.40,2.30,2.17,2.01,
					1.83,1.64,1.44,1.24,1.05,0.88,0.74,
					0.62,0.54,0.50,0.50,0.54,0.61,0.72,
					0.86,1.03,1.22,1.41,1.61,1.81,1.99,
					2.15,2.29,2.39,2.46,2.49,2.48,
					{"value":2.44,"colour":"#FF0000","tip":"monkies"},
					2.35,2.23,2.08]
			}
		],

	  "x_axis":{
		"labels": {
		  "rotate": "vertical",
		  "labels":["2:00am","2:10","2:20","2:30","2:40","2:50",
					"3:00am","3:10","3:20","3:30","3:40","3:50",
					"4:00am","4:10","4:20","4:30","4:40","4:50",
					"5:00am","5:10","5:20","5:30","5:40","5:50",
					"6:00am","6:10","6:20","6:30","6:40","6:50",
					"7:00am","7:10","7:20","7:30","7:40","7:50",
					"8:00am","8:10","8:20","8:30","8:40","8:50",
					"9:00am","9:10","9:20"]
		}
	  },

	  "y_axis__":{
		"max":   3
	  }

	};

	var pie = {
	  "title":{
		"text":"Pie for you sir?",
		"style":"{font-size: 30px;}"
	  },

	  "elements":[
		{
		  "type":      "pie",
		  "colours":   ["#d01f3c","#356aa0","#C79810"],
		  "alpha":     0.6,
		  "border":    2,
		  "start-angle": 35,
		  "values" :   [
			2,
			3,
			{"value":6.5,"label":"hello (#val#)", "tip":"99 bottles of beer","on-click":"http://eden"},
			{"value":6.5,"on-click":"my_function"}
		  ]
		}
	  ]
	};
	var area = {
	  "title":{
		"text":"Area Chart",
		"style":"{font-size: 30px;}"
	  },

	  "y_legend":{
		"text":"OFC",
		"style":"{font-size: 12px; color:#736AFF;}"
	  },

	  "elements":[
		{
		  "type":      "area",
		  "colour":    "#CC3399",
		  "fill":      "#343399",
		  "fill-alpha": 0.5,
		  "text":      "Page views",
		  "width":     3,
		  "font-size": 10,
		  "dot-size":  7,
		  "tip":       "Hello<br>#val#",
		  "values" :   [0,0.37,0.73,1.07,1.36,1.59,1.77,1.87,1.89,1.85,1.72,1.53,1.28,0.97,0.63,0.26,-0.11,-0.48,-0.84,-1.16,-1.43,-1.65,-1.80,-1.88,-1.89,-1.82,-1.67,-1.46,-1.19,-0.88]
		}
	  ],

	  "x_axis":{
		"ma--x":30,
		"labels": {
		  "labels": ["0.00","0.38","0.74","1.07","1.36","1.60","1.77","1.87","1.90","1.85","1.73","1.54",
				  "1.28","0.98","0.64","0.27","-0.11","-0.49","-0.84","-1.16","-1.44","-1.66","-1.81",
				  "-1.89","-1.89","-1.82","-1.68","-1.47","-1.20","-0.88"]
		}
	  },

	  "y_axis":{
		"min": -2,
		"max": 2
	  }
	};

	var bar = {
	  "title":{
		"text":  "Many data lines",
		"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
	  },

	  "y_legend":{
		"text": "Open Flash Chart",
		"style": "{color: #736AFF; font-size: 12px;}"
	  },

	  "elements":[
		{
		  "type":      "bar",
		  "alpha":     0.5,
		  "colour":    "#9933CC",
		  "text":      "Page views",
		  "font-size": 10,
		  "values" :   [9,6,7,9,5,7,6,9,7]
		},
		{
		  "type":      "bar",
		  "alpha":     0.5,
		  "colour":    "#CC9933",
		  "text":      "Page views 2",
		  "font-size": 10,
		  "values" :   [4,9,6,7,9,5,7,6,9]
		}
	  ],

	  "x_axis":{
		"stroke":1,
		"tick_height":10,
		"colour":"#d000d0",
		"grid_colour":"#00ff00",
		"labels": ["January","February","March","April","May","June","July","August","Spetember"]
	   },

	  "y_axis":{
		"stroke":      4,
		"tick_length": 3,
		"colour":      "#d000d0",
		"grid_colour": "#00ff00",
		"offset":      0,
		"max":         20
	  }

	/* &x_axis_steps=2& */

	};


	return {
		line : line,
		pie : pie,
		area : area,
		bar : bar
		
	};
}();
Dom.ready(function(){
	function findSWF(movieName) {
		if (navigator.appName.indexOf("Microsoft")!= -1) {
			return window[movieName];
		} else {
			return document[movieName];
		}
	}
	function load(chart)
	{
		tmp = findSWF("my_chart");
		x = tmp.load( JSON.stringify(chart) );
	}
	W('#selecttype a').on('click',function(e){
		e.preventDefault();
		var type = W(this).attr('data-type');
		//alert(type);
		load(ofcData[type]);
	});

});
</script>
<%/block%>
<%block name='aside'%>
<%include file="inc/aside.inc"%>
<%/block%>
<%block name='article'%>
<div id="my_chart"></div>
<div id="selecttype">
<a href="#" data-type="line">line</a> <br>
<a href="#" data-type="bar">bar</a> <br>
<a href="#" data-type="area">area</a> <br>
<a href="#" data-type="pie">pie</a> <br>
</div>
<script type="text/javascript">
swfobject.embedSWF("<%#res_url#%>/flash/ofc.swf", "my_chart", "450", "300", "9.0.0");
</script>
<%/block%>
<%block name='ft_js'%>
<script>

</script>

<%/block%>